<template>
	<view>
		<view v-for="(item,index) in mlist" :key="item.tit" class="list" :class="['bg-' + item.color,toggleDelay?'animation-slide-bottom':'']"
				:style="[{animationDelay: (index )*0.1 + 's'}]"
				@click="fn(item)">
			<view class="dis">
				<view class="cuIcon-title text-green book"></view>
				<view>{{item.typeName}}</view>
			</view>
			
			<view class="cuIcon-right text-grey">

			</view>
		</view>
	</view>
</template>

<script>
	import {cikulist} from "../../utils/ciku.js"
	export default {
		data() {
			return {
				
				mlist: [],
				paddingTopNum: 100,
				toggleDelay: false
			}
		},
		created() {
			this.ciku()
		},
		mounted() {
			this.ToggleDelay()
		},
		methods: {
			async ciku(){
				const {data:res} = await cikulist()
				console.log(res.data)
				this.mlist = res.data
			},
			ToggleDelay() {
				this.toggleDelay = true;
				setTimeout(() => {
					this.toggleDelay = false
				}, 1000)
			},
			fn(item){
				uni.navigateTo({
					url:`../cikulist/cikulist?typeName=${item.typeName}&typeId=${item.typeId}`
				})
			}
		}
	}
</script>

<style scoped>
	.list {
		background-color: #FFFFFF;
		margin: 15px;
		padding: 10px;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.dis {
		display: flex;
		align-items: center;
	}

	.book {
		margin-right: 10px;
		font-size: 30px;
	}
</style>
